@import '../middleware/Theme/constants';

section.HeroSection {
	display: table;
	width: 100%;
	height: 50vh;
	.light-gray-to-black-background-color-gradient();

	.banner-content {
		color: @font-color-light;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}

	.banner-titles {
		margin-bottom: 3rem;
		.default-text-shadow();
	}

	.banner-title {
		font-weight: bold;
		font-size: 2.5rem;
		margin-top: 0;

		@media (min-width: @min-medium-screen) {
			font-size: 3rem;
		}
	}

	.banner-subtitle {
		font-size: 1.125rem;
		margin-top: 0;

		@media (min-width: @min-medium-screen) {
			font-size: 1.5rem;
		}
	}

	.Button {
		display: block;
		width: 100%;
		margin: 1.25rem auto;

		@media (min-width: 600px) {
			width: 350px;
		}

		@media (min-width: 875px) {
			display: inline-block;
			margin: 1.25rem;
		}
	}
}
